import React, {Component} from 'react'
import {
    Card,
    Icon,
    Form,
    Input,
    Cascader,
    Button,
    message
} from 'antd'
import LinkButton from '../../components/link-button'
import PicturesWall from './pictures-wall'
import RichTextEditor from './rich-text-editor'
import {reqCategorys, reqAddOrUpdateProduct} from '../../api'

const {Item} = Form
const { TextArea } = Input


class ProductAddUpdate extends Component{
    state={
        options: [], // 用来显示级联列表的数组
    }
    constructor(props){
        super(props)
        this.pw = React.createRef();
        this.editor = React.createRef();
    }
    // 生成级联的一级列表
    initOptions=async (categorys)=>{
        // 根据一级分类数组生成 option 的数组
        const options=categorys.map(c=>({
            value: c._id,
            label: c.name,
            isLeaf: false, // 不是叶子
        }))
        // 如果当前是更新 , 且商品是一个二级分类的商品
        const {product, isUpdate} = this
        if(isUpdate && product.pCategoryId!=='0'){
            // 异步获取 product.pCategoryId 的二级分类列表
            const subCategorys=await reqCategorys(product.pCategoryId)
            if(subCategorys && subCategorys.length>0){
                // 生成二级的 option 数组
                const cOptions = subCategorys.map(c => ({
                    value: c._id,
                    label: c.name,
                    isLeaf: true,
                }))
                // 找到对应的 option
                const targetOption=options.find(option=>option.value===product.pCategoryId)
                // 将 cOptions 添加为对应的一级 option 的 children
                targetOption.children = cOptions
            }
        }
        // 更新状态
        this.setState({
            options
        })
    }
    /*异步获取一级/二级分类列表, 并显示
    * 获取指定分类 id 的子分类列表,如果 parentId 为 0 时获取一级列表
    */
    getCategorys=async (parentId)=>{
        const result=await reqCategorys(parentId)
        if(result.status===0){
            const categorys = result.data
            if(parentId==='0'){
                // 根据一级分类数组初始化生成 options 数组
                this.initOptions(categorys)
            }else { // 当前得到是二级分类列表
                // 返回二级分类列表 ( 作为 async 函数的 promise 对象的成功的 value 值)
                return categorys
            }
        }
    }
    /*对商品价格进行自定义验证*/
    validatePrice=(rule, value, callback)=>{
        value = value * 1
        if(value>0) {
            callback()
        } else {
            callback(' 价格必须是大于 0  的数值')
        }
    }
    submit=()=>{
        this.props.form.validateFields(async (err,values)=>{
            if(!err){
                // 收集产品相关信息
                const {name, desc, price, categoryIds} = values
                // 在父组件中得到子组件对象 , 调用子组件对象的方法
                const imgs = this.pw.current.getImgs()
                const detail = this.editor.current.getDetail()
                let pCategoryId = ''
                let categoryId = ''
                if(categoryIds.length===1){
                    // 选择的是一级分类
                    pCategoryId = '0'
                    categoryId = categoryIds[0]
                }else {
                    // 选择的是二级分类
                    pCategoryId = categoryIds[0]
                    categoryId = categoryIds[1]
                }
                // 封装成对象
                const product = {name, desc, price, pCategoryId, categoryId, detail, imgs}
                // 如果是更新 , 指定 product 的 _id 属性值
                if(this.isUpdate){
                    product._id = this.product._id
                }
                // 请求保存
                const result=await reqAddOrUpdateProduct(product)
                if(result.status===0){
                    message.success(' 保存商品成功')
                    this.props.history.goBack()
                }else {
                    message.success(' 保存商品失败')
                }
            }
        })
    }
    /*
  用加载下一级列表的回调函数
   */
    loadData=async (selectedOptions)=>{
        // console.log('loadDate()', selectedOptions)
        const targetOption = selectedOptions[selectedOptions.length - 1]
        targetOption.loading = true // 显示 loading
        // 异步请求获取对应的二级分类列表
        // await 的作用 : 保证完成执行完保存的分类数组才进入后面的语句
        const subCategorys=await this.getCategorys(targetOption.value)
        targetOption.loading = false // 隐藏 loading
        if(subCategorys && subCategorys.length>0){
            // 生成一个二级的 options
            const cOptions = subCategorys.map(c => ({
                value: c._id,
                label: c.name,
                isLeaf: true,
            }))
            // 添加为对应的 option 的 children( 子 options)
            targetOption.children = cOptions
        }else{
            // 没有子分类
            targetOption.isLeaf = true
        }
        // 更新 options 状态
        this.setState({
            options: [...this.state.options]
        })
    }
    componentDidMount() {
        this.getCategorys('0')
    }

    componentWillMount(){
        // 取出携带的state
        const product = this.props.location.state  // 如果是添加没值, 否则有值
        // 保存是否是更新的标识
        this.isUpdate = !!product
        // 保存商品(如果没有, 保存是{})
        this.product = product || {}
    }


    render() {
        const {isUpdate,product}=this
        const {pCategoryId, categoryId,imgs, detail} = product
        const {options} = this.state
        const {getFieldDecorator} = this.props.form
        const categoryIds = []
        if(isUpdate){
            if(pCategoryId==='0'){
                categoryIds.push(categoryId)
            }else {
                categoryIds.push(pCategoryId)
                categoryIds.push(categoryId)
            }
        }
        const title=(
            <span>
                <LinkButton onClick={() => this.props.history.goBack()}>
                    <Icon type='arrow-left' style={{fontSize: 20}}/>
                </LinkButton>
                {isUpdate ? ' 修改商品' : ' 添加商品'}
            </span>
        )
        // 指定 form 的 item 布局的对象
        const formItemLayout={
            labelCol: { span: 2 },
            wrapperCol: { span: 8 }
        }
        return (
            <Card title={title}>
                <Form>
                    <Item  label=" 商品名称" {...formItemLayout}>
                        {
                            getFieldDecorator('name',{
                                initialValue: product.name,
                                rules:[
                                    {required: true, message: ' 商品名称必须输入'}
                                ]
                            })(
                                <Input placeholer=' 请输入商品名称'/>
                            )
                        }
                    </Item>
                    <Item label=" 商品描述" {...formItemLayout}>
                        {
                            getFieldDecorator('desc',{
                                initialValue: product.desc,
                                rules:[
                                    {required: true, message: ' 商品描述必须输入'}
                                ]
                            })(
                                <TextArea placeholder=" 请输入商品描述" autoSize={{ minRows: 2, maxRows: 6 }} />
                            )
                        }
                    </Item>
                    <Item  label=" 商品价格" {...formItemLayout}>
                        {
                            getFieldDecorator('price',{
                                initialValue: product.price,
                                rules:[
                                    {required: true, message: ' 商品价格必须输入'},
                                    {validator: this.validatePrice}
                                ]
                            })(
                                <Input type='number' placeholder='请输入商品价格' addonAfter='元'/>
                            )
                        }
                    </Item>
                    <Item label="商品分类">
                        {
                            getFieldDecorator('categoryIds',{
                                initialValue: categoryIds,
                                rules:[
                                    {required: true, message: ' 商品分类必须输入'}
                                ]
                            })(
                                <Cascader options={options} loadData={this.loadData} />
                            )
                        }
                    </Item>
                    <Item label=" 商品图片" {...formItemLayout}>
                        <PicturesWall ref={this.pw} imgs={imgs}/>
                    </Item>
                    <Item label="商品详情" labelCol={{span: 2}} wrapperCol={{span: 20}}>
                        <RichTextEditor ref={this.editor} detail={detail} />
                    </Item>
                    <Button type='primary' onClick={this.submit}>提交</Button>
                </Form>
            </Card>
        )
    }
}
export default Form.create()(ProductAddUpdate)